<!--
  专家页面细胞病理
  lzx
  2020年1月13日
  www
  2020.01.16
-->
<template lang="pug">
  el-container
    el-header.header
      title-bg
    el-container
      el-aside.nav-layout(width="258px")
        nav-menu
      el-main.main-expert
        div.main-content-div
          p.main-content-p 细胞病理-专家信息
          el-select.search-criteria(v-model="hospital" placeholder="请选择专家医院")
            el-option(
            v-for="item in options"
            :key="item.hospitalName"
            :label="item.hospitalName"
            :value="item.id")
          input.input-criteria(v-model="expert" placeholder="请输入专家姓名")
          div.btn(@click="getCellData") 查询
          div.btn(@click="reset") 重置
        div.main-content-box(ref="mainContentBox")
          p.main-content-title 首席专家
          el-row(:gutter="28")
            el-col(:md="8" :lg="6" :xl="4" v-for="(item, index) in expertList" :key="index" v-if="item.roleName === '首席专家'? true : false")
              el-card.expert-card
                img.expert-avatar(:src="item.icon" @click="blockMessage(item)")
                div.isChief 首席专家
                p.expert-name {{item.name}}
                p.department-duty {{item.department}} | {{item.title}}
                p.expert-hospital {{item.hospitalName}}
          p.main-content-title 会诊专家
          el-row(:gutter="28")
            el-col(:md="8" :lg="6" :xl="4" v-for="(item, index) in expertList" :key="index" v-if="item.roleName === '首席专家'? false : true")
              el-card.expert-card
                img.expert-avatar(:src="item.icon" @click="blockMessage(item)")
                p.expert-name {{item.name}}
                p.department-duty {{item.department}} | {{item.title}}
                p.expert-hospital {{item.hospitalName}}
    div(ref="formimg" v-if="isShow === true").formimg
      img(:src="perMessage.icon")
      div.formimgDiv
        el-form(:model="perMessage" label-width="130px" size="medium")
          el-form-item(label="姓名:")
            el-input(v-model="perMessage.name" readonly)
          el-form-item(label="所属医院:")
            el-input(v-model="perMessage.hospitalName" readonly)
          el-form-item(label="所属科室:")
            el-input(v-model="perMessage.department" readonly)
          el-form-item(label="职称:")
            el-input(v-model="perMessage.title" readonly)
          el-form-item(label="病理:")
            el-input(v-model="perMessage.className" readonly)
          el-form-item(label="详情介绍:")
            el-input(v-model="perMessage.information" type="textarea" readonly resize="none" :rows="6")
    div(ref="formbgc" v-if="isShow === true" @click="cloneImg").formbgc
</template>

<script>
  import TitleBg from '../../components/TitleBg'
  import NavMenu from '../../components/NavMenu'
  import MainContent from '../../components/MainContent'
  import {baseURL} from '../../config/global.toml'
  export default {
    components: {
      MainContent,
      NavMenu,
      TitleBg
    },
    name: 'expertOrg',
    data() {
      return {
        hospital: null,
        expert: null,
        options: [],
        expertList: [], // 专家列表
        fullHeight: document.documentElement.clientHeight, // 屏幕科室高度
        classifyArr: '',
        isShow: false,
        perMessage: null
      }
    },
    created() {
      // 身份判断
      // this.identity = JSON.parse(this.$cookies.get('personaltwo'))
      this.getuserid()
    },
    mounted() {
      const that = this
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight
          that.fullHeight = window.fullHeight
          that.$nextTick(() => {
            that.$refs.mainContentBox.style.height = that.fullHeight - 232 + 'px'
          })
        })()
      }
      this.$nextTick(() => {
        that.$refs.mainContentBox.style.height = that.fullHeight - 232 + 'px'
      })
      this.getHospital()
      this.classify()
    },
    methods: {
      getuserid() {
        let href = decodeURIComponent(window.location.href)
        let personaltwo = href.split('?')[1]
        this.identity = JSON.parse(personaltwo)
        this.$KalixCatch.save('personaltwo', personaltwo)
        this.$KalixCatch.save('id', this.identity[0].id)
        this.$KalixCatch.save('loginname', this.identity[0].loginName)
        this.$KalixCatch.save('loginpass', '123')
        this.$KalixCatch.save('user_name', this.identity[0].name)
        this.axios.request({
          method: 'GET',
          url: baseURL + '/camel/rest/users?jsonStr=&page=1&start=0&limit=10&otherStr='
        }).then((res) => {
          console.log('======users=======', res)
          this.$KalixCatch.save('personal', JSON.stringify(res.data.data))
        })
      },
      cloneImg() {
        this.isShow = false
      },
      blockMessage(item) { // 点击显示详情信息
        this.isShow = true
        this.perMessage = item
        console.log('item', item)
      },
      classify() { // 病理分类获取
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/classs/getArchives'
        }).then((res) => {
          this.classifyArr = res.data.data
          this.getCellData()
        })
      },
      reset() { // 重置
        this.hospital = null
        this.expert = null
        this.getCellData()
      },
      getHospital() { // 获取医院信息下拉列表
        this.$http.get('/camel/rest/telemedicine/hospitals').then(res => {
          if (res.data.totalCount > 0) {
            this.options = res.data.data
          }
        })
      },
      getCellData() { // 查询
        console.log('hospital:', this.hospital)
        console.log('expert:', this.expert)
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/users/getUserRole',
          params: {
            cid: this.classifyArr[1].id,
            hospitalId: this.hospital,
            name: this.expert
          }
        }).then((res) => {
          console.log('res---------', res.data)
          if (res.data.totalCount > 0) {
            this.expertList = res.data.data
          } else {
            this.expertList = []
          }
          console.log('expertList===', this.expertList)
        })
      }
    },
    watch: {
      fullHeight(val) {
        if (!this.timer) {
          this.fullHeight = val
          this.timer = true
          let that = this
          setTimeout(function () {
            that.timer = false
          }, 400)
        }
      }
    }
  }
</script>

<style scoped lang="stylus">
  .header
    padding 0

  .nav-layout
    position relative
    height 100%

  .main-expert
    margin-left 27px
    padding 0
    .main-content-box
      padding-right 27px
      margin-top 42px
      overflow-y auto
      overflow-x hidden
      .main-content-title
        font-size 22px
        line-height 72px

  .expert-card
    background-image url("/static/img/expertBg.png")
    background-repeat no-repeat
    background-size 100% 70px
    background-position 0 0
    text-align center
    margin-bottom 28px
    .expert-avatar
      display block
      width 76px
      height 76px
      border-radius 50%
      margin 0 auto
      margin-top 10px
    .isChief
      width 56px
      height 18px
      color #fff
      background-color #1572e8
      border-radius 2px
      text-align center
      margin 0 auto
      position relative
      top -6px
    .expert-name
      font-size 20px
      margin 8px 0 12px 0
    .department-duty
      font-size 14px
      color #83848a
    .expert-hospital
      margin-top 5px
      font-size 14px
      color #bbbbbb

  .main-content-div
    margin-top 43px

  .main-content-p
    color #fff
    font-size 20px
    margin-bottom 20px

  .search-criteria .el-input .el-input__inner
    background-color rgba(0, 0, 0, 0.15)
    border none
    color #fff

  .input-criteria
    background-color rgba(0, 0, 0, 0.15)
    border none
    color #fff
    height 38px
    padding-left 18px
    width 197px
    font-size 14px

  .input-criteria::-webkit-input-placeholder
    color #fff
    opacity 1

  .main-content-div .btn
    display inline-block
    width 66px
    height 42px
    line-height 42px
    text-align center
    background-color #0f5abc
    border 1px solid #fff
    vertical-align top
    margin-left 20px
    color #fff
    cursor pointer
    -o-user-select none /*文字禁止被选中*/
    -moz-user-select none /*火狐 firefox*/
    -webkit-user-select none /*webkit浏览器*/
    -ms-user-select none /*IE10+*/
    user-select none
    border-radius 5px
    -webkit-box-sizing border-box
    box-sizing border-box
    font-size 14px

  .formimg
    width 600px
    height 530px
    background-color #fff
    /*display none*/
    position absolute
    left 50%
    top 50%
    transform translate(-50%, -50%)
    z-index 20
    grid-row-gap 20px
    grid-column-gap 20px
    border-radius 10px
    padding 20px
    box-sizing border-box
    img
      width 150px
      height 150px
      margin-top 50px
      float left
    .formimgDiv
      float left
      margin-top 20px
      span
        display inline-block
        vertical-align middle
        margin-right 10px

  .formbgc
    width 100%
    height 100%
    background rgba(0, 0, 0, 0.5)
    position absolute
    /*display none*/
    z-index 10
</style>
